import React from "react";
import { Card, Row, Col, Table, message, Modal, Button } from "antd";

import Echarts from "echarts/lib/echarts";
// 按需加载 pie
import "echarts/lib/chart/pie";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";
import "echarts/lib/component/legend";
import "echarts/lib/component/markPoint";

import ReactEcharts from "echarts-for-react";

import Theme from "../../config/echartThemeConfig";
import "./index.less";
interface IProp {}
interface IState {}

class EChart extends React.Component<IProp, IState> {
	constructor(props: IProp, state: IState) {
		super(props, state);
		this.state = {};
	}

	// 主题颜色要在组件加载前注入
	componentWillMount() {
		Echarts.registerTheme("MyTheme", Theme);
	}

	render() {
		const option1 = {
			title: {
				text: "这是饼图",
				x: "center"
			},
			tooltip: {
				trigger: "item",
				formatter: "{a}: <br />{b}: {c}<br />占比: {d}%"
			},
			legend: {
				orient: "vertical", // 'horizontal' | 'vertical'
				right: 10, // number | string  ,  0 | 'auto',
				top: 0,
				// itemGap: 30,
				// itemWidth: 25,
				// itemHeight: 25,
				data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
			},
			series: [
				{
					name: "数据1",
					type: "pie",
					center: ["40%", "60%"],
					data: [
						{
							name: "Mon",
							value: 10
						},
						{
							name: "Tue",
							value: 52
						},
						{
							name: "Wed",
							value: 200
						},
						{
							name: "Thu",
							value: 334
						},
						{
							name: "Fri",
							value: 390
						},
						{
							name: "Sat",
							value: 330
						},
						{
							name: "Sun",
							value: 220
						}
					]
				}
			]
		};

		const option2 = {
			title: {
				text: "这是环形图",
				x: "center"
			},
			tooltip: {
				trigger: "item",
				formatter: "{a}: <br />{b}: {c}<br />占比: {d}%"
			},
			legend: {
				orient: "vertical", // 'horizontal' | 'vertical'
				right: 10, // number | string  ,  0 | 'auto',
				top: 0,
				// itemGap: 30,
				// itemWidth: 25,
				// itemHeight: 25,
				data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
			},
			series: [
				{
					name: "数据1",
					type: "pie",
					radius: ["60%", "70%"],
					center: ["40%", "60%"],
					data: [
						{
							name: "Mon",
							value: 10
						},
						{
							name: "Tue",
							value: 52
						},
						{
							name: "Wed",
							value: 200
						},
						{
							name: "Thu",
							value: 334
						},
						{
							name: "Fri",
							value: 390
						},
						{
							name: "Sat",
							value: 330
						},
						{
							name: "Sun",
							value: 220
						}
					]
				}
			]
		};

		const option3 = {
			title: {
				text: "这是南丁格尔图",
				x: "center"
			},
			tooltip: {
				trigger: "item",
				formatter: "{a}: <br />{b}: {c}<br />占比: {d}%"
			},
			legend: {
				orient: "vertical", // 'horizontal' | 'vertical'
				right: 10, // number | string  ,  0 | 'auto',
				top: 0,
				// itemGap: 30,
				// itemWidth: 25,
				// itemHeight: 25,
				data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
			},
			series: [
				{
					name: "数据1",
					type: "pie",
					center: ["40%", "60%"],
					data: [
						{
							name: "Mon",
							value: 10
						},
						{
							name: "Tue",
							value: 52
						},
						{
							name: "Wed",
							value: 200
						},
						{
							name: "Thu",
							value: 334
						},
						{
							name: "Fri",
							value: 390
						},
						{
							name: "Sat",
							value: 330
						},
						{
							name: "Sun",
							value: 220
						}
					].sort((a, b) => {
						return a.value - b.value;
					}),
					roseType: "area" // 'radius' | 'area'
				}
			]
		};

		return (
			<div>
				<Card title="图例" className="button-wrap">
					<Row>
						<Col span={8}>
							<ReactEcharts option={option1} theme="MyTheme" style={{ height: "280px" }}></ReactEcharts>
						</Col>
						<Col span={8}>
							<ReactEcharts option={option2} theme="MyTheme" style={{ height: "280px" }}></ReactEcharts>
						</Col>
						<Col span={8}>
							<ReactEcharts option={option3} theme="MyTheme" style={{ height: "280px" }}></ReactEcharts>
						</Col>
					</Row>
				</Card>
			</div>
		);
	}
}

export default EChart;
